<template>
  <div id="mountNode"></div>
</template>

<script>
import G6 from "@antv/g6";
G6.registerNode(
  "sql",
  {
    drawShape(cfg, group) {
      const rect = group.addShape("rect", {
        attrs: {
          x: -60,
          y: -25,
          width: 100,
          height: 50,
          radius: 10,
          size : 60,
          stroke: "#5B8FF9",
          fill: "#C6E5FF",
          lineWidth: 2,
        },
        name: "rect-shape",
      });

      if (cfg.name) {
        const name =
          cfg.name.length > 8
            ? cfg.name.substring(0, 8) +
              "\n" +
              cfg.name.substring(8, cfg.name.length)
            : cfg.name;

        const color = cfg.rootNode ? "#333" : "green";
        group.addShape("text", {
          attrs: {
            text: name,
            x: -10,
            y: 0,
            fill: color,
            fontSize: 12,
            textAlign: "center",
            textBaseline: "middle",
            fontWeight: "bold",
          },
          name: "text-shape",
        });
      }
      return rect;
    },
  },
  "single-node"
);
export default {
  data() {
    return {
      chartData: {
        // 节点信息
        nodes: [
          {
            id: "1",
            label: "申请人",
            name :'申请人',
            x: 80,
            y: 30,
            size: 60,
            type: "circle",
            anchorPoints: [[1, 0.5]],
            rootNode: true,
            
          },
          {
            id: "2",
            name: "申请部门",
            x: 220,
            y: 30,
            desc : '22',
            anchorPoints: [
              [1, 0.5],
              [0, 0.5],
            ],
          },
          {
            id: "3",
            name: "实验室技术员",
            x: 360,
            y: 30,
            anchorPoints: [
              [0, 0.5],
              [1, 0.5],
              [0.5, 1],
            ],
            desc : '22',
          },
          {
            id: "4",
            name: "实验室技术员领导",
            x: 500,
            y: 30,
            anchorPoints: [
              [0, 0.5],
              [1, 0.5],
            ],
          },
          {
            id: "5",
            name: "实验室技术主管",
            x: 640,
            y: 30,
            anchorPoints: [
              [0, 0.5],
              [1, 0.5],
              [0.5, 1],
            ],
          },
          {
            id: "6",
            name: "分析人员",
            x: 780,
            y: 30,
            anchorPoints: [
              [0, 0.5],
              [1, 0.5],
              [0.5, 1],
            ],
          },
          {
            id: "7",
            label: "归档",
            x: 920,
            y: 30,
            type : 'circle',
            size : 60,
            anchorPoints: [[0, 0.5]],
            rootNode: true,
            // label配置
            labelCfg: {
              //文字样式
              style: {
                fill: "orange",
                // stroke: "#666",
                fontSize: 14,
              },
            },
          },
          {
            id: "8",
            name: "实验室经理",
            x: 460,
            y: 150,
            anchorPoints: [
              [0, 0.5],
              [1, 0.5],
            ],
          },
        ],
        // 连接线
        edges: [
          {
            source: "1",
            target: "2",
          },
          {
            source: "2",
            target: "3",
            style : {
              stroke : 'orange'
            }
          },
          {
            source: "3",
            target: "4",
            label: "审核路线1",
            labelCfg: {
              position: "end",
              refY: 30,
              refX: 0,
              style: {
                fill: "green",
                // stroke: "#666",
                fontSize: 10,
              },
            },
          },
          {
            source: "4",
            target: "5",
          },
          {
            source: "5",
            target: "6",
          },
          {
            source: "6",
            target: "7",
          },
          {
            source: "3",
            target: "8",
            label: "审核路线2",
            labelCfg: {
              position: "end",
              refY: 35,
              refX: 0,
              style: {
                fill: "orange",
                // stroke: "#666",
                fontSize: 10,
              },
            },
          },
          {
            source: "8",
            target: "5",
            sourceAnchor: 1,
            targetAnchor: 2,
          },
        ],
      },
      graph: "",
    };
  },
  mounted() {
    this.getCharts();
  },
  methods: {
    getCharts() {
      const mountNode = document.getElementById("mountNode");
      const width = mountNode.scrollWidth;

      const height = mountNode.scrollHeight || 750;

      // todo 设置鼠标悬停显示详情操作
      const tooltip = new G6.Tooltip({
        offsetX: 30,
        offsetY: 10,
        getContent(e) {
          const outDiv = document.createElement("div");
          // outDiv.style.width = "auto";
          outDiv.style.color = "green";
          outDiv.innerHTML = `
            <div style="min-width:50px;font-size: 12px;text-align: center;">
                <p style="">${
                  e.item.getModel().label || e.item.getModel().name
                }</p>
            </div>`;
          return outDiv;
        },
        itemTypes: ["node"],
      });
      this.graph = new G6.Graph({
        container: "mountNode", // 指定挂载点
        // 画布宽高
        width,
        height,
        defaultNode: {
          type: "sql",
        },
        plugins: [tooltip], //插件
        //边的样式配置
        defaultEdge: {
          type: "polyline",
          // 边样式配置
          style: {
            stroke: "#409EFF", // 边描边颜色
            endArrow: {
              path: G6.Arrow.triangle(5, 5, 0), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 0,
              fill: "#409EFF",
              opacity: 0.5,
              lineWidth: 1,
            },
          },
          labelCfg: {
            position: "center",
          },
        },
        nodeStateStyles: {
          selected: {
            stroke: "#d9d9d9",
            fill: "#5394ef",
          },
        },

        modes: {
          default: [
            "drag-canvas",
            "zoom-canvas",
            "click-select",
            //             {
            //               type: "tooltip",
            //               formatText(model) {
            //                 return `<li style="">${model.name}</li>`;
            //               },
            //               offsetX: 10,
            //   offsetY: 20,
            //             //   offset: -10,
            //             },
          ],
        },
        fitView: true,
        // fitViewPadding: -10
      });
      //读取数据
      this.graph.data(this.chartData);
      // 渲染图
      this.graph.render();
      this.bindEvents();
      this.graph.fitView();
      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!this.graph || this.graph.get("destroyed")) return;
          if (!mountNode || !mountNode.scrollWidth || !mountNode.scrollHeight)
            return;
          this.graph.changeSize(mountNode.scrollWidth, mountNode.scrollHeight);
        };
    },

    bindEvents() {
      this.graph.on("node:click", (e) => {
        //节点绑定点击事件
        if (e.item) {
          console.log(e.item);
        }
      });
    },
  },
};
</script>

